<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue base</title>
    <link rel="stylesheet" href="../../assets/css/bootstrap.min.css" >    
    <script src="../../assets/js/vue-2.5.6.js"></script>
</head>
<style>
    .bottom-line {
        padding-bottom: 10px;border-bottom: 1px solid black;width: 100%;height: auto;
    }
    .red {
        color:red;
    }
    .green{
        color:green;
    }
    .font20{
        font-size: 20px;
    }
</style>
<body>
    <form v-on:submit.prevent="reverseMessage"></form>
        <div class="container" id="app-bind">
            <div class="form-group bottom-line">
                <h3>bind & 缩写 : </h3>
                <div class="input-group">
                    <a :title="bind_title" class="help-block" v-bind:class="bind_class" v-bind:href="bind_url">
                        鼠标悬停几秒
                    </a>
                    <span class="font20" :class="{red:bind_is}">哈哈哈</span>

                    <div :class="[red,font20]">3、绑定class中的数组</div>
                    <!-- <div :class="bind_is?green:red">4、绑定class中的三元表达式判断</div> -->
                    <div :style="{fontSize:'22px',color:'blue'}">5、绑定style</div>
                    <div :style="bind_styleObject">6、用对象绑定style样式</div>
                    <div v-bind:class="classObject">classObject</div>
                </div>
            </div>
            <div class="form-group bottom-line">
                <!--
                    v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
                    v-show：调整css dispaly属性，可以使客户端操作更加流畅。
                -->
                <h3>v-if & v-else & v-show</h3>
                <p v-if="if_isLogin">login ok</p>
                <p v-else="if_isLogin">login error</p>
                <p v-show="if_isLogin">login show</p>
            </div>
            <div class="form-group bottom-line">
                <h3>v-for & sort</h3>
                <ul class="navigation" style="padding-bottom: 20px;">
                    <ul>
                    <li v-for="(student,key,index) in sortStudents">
                        {{key}} {{index}}：{{student.name}} - {{student.age}}
                    </li>
                    </ul>
                    
                </ul>
                <ul class="navigation">
                    <li v-for="sortNum in sortItems">
                        {{ sortNum }}
                    </li>
                </ul>
            </div>
            <div class="form-group bottom-line">
                <h3>v-on & 缩写 @ & 实现一个加减按钮 && on事件修饰符</h3>
                <p>{{on_msg}}</p>
                <button @click="reverseMessage">逆转消息</button>
                最终得分：{{on_jj}}
                <button v-on:click="jiafa">增加</button>
                <button v-on:click="jianfa">减少</button>
                <div>
                    <input v-on:keyup.enter="key_to_jj" v-model="model_on" name="" value="">
                </div>
                <div>
                    <!-- 阻止单击事件继续传播 -->
                    <a v-on:click.stop="reverseMessage"></a>

                    <!-- 提交事件不再重载页面 -->
                    <form v-on:submit.prevent="reverseMessage"></form>

                    <!-- 修饰符可以串联 -->
                    <a v-on:click.stop.prevent="reverseMessage"></a>

                    <!-- 只有修饰符 -->
                    <form v-on:submit.prevent></form>

                    <!-- 添加事件监听器时使用事件捕获模式 -->
                    <!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
                    <div v-on:click.capture="reverseMessage">...</div>

                    <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
                    <!-- 即事件不是从内部元素触发的 -->
                    <div v-on:click.self="reverseMessage">...</div>
                    <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
                    <!-- 而不会等待 `onScroll` 完成  -->
                    <!-- 这其中包含 `event.preventDefault()` 的情况 -->
                    <div v-on:scroll.passive="reverseMessage">...</div>
                </div>
            </div>
            
            <div class="form-group bottom-line">
                <h3>v-model 数据双向绑定 & 单、复选框 & 修饰符</h3>
                <p>{{model_msg}}</p>
                <input v-model="model_msg">
                <div>
                    <input type="checkbox" id="jack" value="Jack" v-model="model_checkedNames">
                    <label for="jack">Jack</label>
                    <input type="checkbox" id="john" value="John" v-model="model_checkedNames">
                    <label for="john">John</label>
                    <input type="checkbox" id="mike" value="Mike" v-model="model_checkedNames">
                    <label for="mike">Mike</label>
                    <br>
                    <span>Checked names: {{ model_checkedNames }}</span>
                </div>
                <div>
                    <!-- 在“change”时而非“input”时更新 -->
                    <input v-model.lazy="model_modifier" >
                    <input v-model.number="model_modifier" type="number">
                    <input v-model.trim="model_modifier">
                </div>
                <div>
                    <!--在模板中跳过vue的编译，直接输出原始值-->
                    <div v-pre>{{model_extra}}  111</div>
                    <!--在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用-->
                    <div v-cloak>
                            {{ model_extra }}
                    </div>
                    <!--在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程-->
                    <div v-once>第一次绑定的值：{{model_extra}}</div>
                    <div><input type="text" v-model="model_extra"></div>
                    <!--在模板中跳过vue的编译，直接输出原始值-->
                </div>
                
            </div>
            <div class="form-group bottom-line">
                <h3>v-text & v-html</h3>
                <span>{{ text_msg }}</span> = <span v-text="text_msg"></span> <br><br>
                <p v-html="html_msg"></p>
            </div>
        </div>

</body>
<script>
    var app_bind = new Vue({
        el:'#app-bind',
        data:{
            bind_title: '页面加载于' + new Date().toDateString(),
            bind_class: 'input-group-addon',
            bind_url:'../index.html',
            bind_is : false,
            bind_styleObject:{
               fontSize:'24px',
               color:'green'
            },
            bind_isActive: true,
            bind_error: null,
            red : {color:'green'},
            font20 : {fontSize:'16px'},
            if_isLogin:true,
            students:[
              {name:'jspang',age:32},
              {name:'Panda',age:30},
              {name:'PanPaN',age:21},
              {name:'King',age:45}
            ],
            sortNums:[
                20,23,18,65,32,19,5,56,41
            ],
            text_msg : 'text_msg test',
            html_msg : '<h2>hello world!</h2>',
            on_msg:'hello world!',
            on_jj: 10,
            model_msg:'hahaha',
            model_on:'10',
            model_checkedNames: [],
            model_modifier : '',
            model_extra : 'model_extra',
        },
        methods:{
            reverseMessage:function(){
                this.on_msg = this.on_msg.split('').reverse().join('');
            },
            jiafa:function(){
                return this.on_jj ++;
            },
            jianfa:function(){
                return this.on_jj --;
            },
            key_to_jj:function(){
                this.on_jj = this.on_jj + parseInt(this.model_on);
            }
        },
        computed:{
            sortItems:function(){
                return this.sortNums.sort(sortNumber);
            },
            sortStudents:function(){
                return sortByKey(this.students,'age');
            },
            classObject: function () {
                return {
                    active: this.bind_isActive && !this.bind_error,
                    'text-danger': this.bind_error && this.bind_error.type === 'fatal'
                }
            } 
        }
    });
function sortNumber(a,b){
    return a - b;
}
    //数组对象方法排序:
function sortByKey(array,key){
    return array.sort(function(a,b){
      var x=a[key];
      var y=b[key];
      return ((x<y)?-1:((x>y)?1:0));
   });
}
</script>
</html>